/*
 * @Author: nqx2007 fenglimima334@163.com
 * @Date: 2023-12-05 08:39:14
 * @LastEditors: nqx2007 fenglimima334@163.com
 * @LastEditTime: 2023-12-11 12:28:30
 * @FilePath: /operator-manager/src/pages/OrderManage/BusinessOrder/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

import { getBusinessOrderList } from '@/services';
import { defaultPagination, defaultTableData } from '@/utils/globalConstants';
import { ProFormText, QueryFilter } from '@ant-design/pro-components';
import { useEmotionCss } from '@ant-design/use-emotion-css';
import type { FormInstance } from 'antd';
import { Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import dayjs from 'dayjs';
import { useEffect, useRef, useState } from 'react';
import { orderStatusMap } from '../constants';
import { OrderTableDataType, OrderTableRowEnum } from '../type.d';

const BusinessOrderPage = () => {
  const [tableData, setTableData] = useState({ ...defaultTableData });
  const [paginationCurrent, setPagination] = useState({ ...defaultPagination });
  const searchFormRef = useRef<FormInstance>();
  const tableAreaClass = useEmotionCss(() => {
    return {
      padding: '20px',
    };
  });
  //获取商家订单的列表数据
  const fetchBusinessOrder = async (params = {}) => {
    const searchOptions = searchFormRef?.current?.getFieldsValue();
    const { page: pageNo, pageSize } = paginationCurrent;
    const searchParams = {
      ...searchOptions,
      ...{ pageNo, pageSize },
      ...params,
    };
    console.log('进行搜索的条件为', searchParams);
    const result = await getBusinessOrderList({ data: searchParams });
    const { dataList = [], totalResult = 0 } = result?.data ?? {};
    setTableData({
      dataList,
      total: totalResult,
    });
  };
  const columns: ColumnsType<OrderTableDataType> = [
    {
      title: '订单号',
      dataIndex: OrderTableRowEnum.ORDER_NO,
      width: 200,
      fixed: 'left',
    },
    {
      title: '优惠券名称',
      dataIndex: OrderTableRowEnum.COUPON_NAME,
      width: 200,
      ellipsis: {
        showTitle: true,
      },
    },
    {
      title: '优惠券ID',
      dataIndex: OrderTableRowEnum.COUPON_ID,
      width: 120,
    },
    {
      title: '购买商家',
      dataIndex: OrderTableRowEnum.PURCHASER,
      width: 120,
      ellipsis: {
        showTitle: true,
      },
    },
    {
      title: '销售商家',
      dataIndex: OrderTableRowEnum.SELLER,
      width: 150,
    },
    {
      title: '单价',
      dataIndex: OrderTableRowEnum.PRICE,
      width: 100,
      render: (value) => {
        const showValue = value ?? 'undefined';
        return showValue !== 'undefined' ? <>¥ {value}</> : '-';
      },
    },
    {
      title: '数量',
      dataIndex: OrderTableRowEnum.COUNT,
      width: 100,
    },
    {
      title: '总金额',
      dataIndex: OrderTableRowEnum.TOTAL_PRICE,
      width: 100,
      render: (value) => {
        const showValue = value ?? 'undefined';
        return showValue !== 'undefined' ? <>¥ {value}</> : '-';
      },
    },
    {
      title: '状态',
      dataIndex: OrderTableRowEnum.STATUS,
      width: 120,
      render: (value) => {
        const item = orderStatusMap.get(value);
        return value ? (
          <span style={{ color: item?.color }}>{item?.label}</span>
        ) : (
          '-'
        );
      },
    },
    {
      title: '支付时间',
      dataIndex: OrderTableRowEnum.PAY_TIME,
      width: 200,
      render: (value) => {
        return value ? dayjs(value).format('YYYY-MM-DD HH:mm:ss') : '-';
      },
    },
  ];
  useEffect(() => {
    fetchBusinessOrder();
  }, []);
  return (
    <>
      <QueryFilter
        defaultCollapsed
        split
        submitter={{
          render: (_, dom) => {
            return dom.reverse();
          },
        }}
        onFinish={async (values) => {
          fetchBusinessOrder({ ...values });
        }}
        onReset={() => {
          fetchBusinessOrder();
        }}
        formRef={searchFormRef}
      >
        <ProFormText name={OrderTableRowEnum.ORDER_NO} label="订单号" />
        <ProFormText name={OrderTableRowEnum.COUPON_NAME} label="优惠券" />
      </QueryFilter>
      <div className={tableAreaClass}>
        <Table
          rowKey={OrderTableRowEnum.ORDER_NO}
          dataSource={tableData.dataList}
          columns={columns}
          scroll={{ x: 'max-width' }}
          pagination={{
            pageSize: paginationCurrent.pageSize,
            current: paginationCurrent.page,
            pageSizeOptions: [20, 50, 100],
            showQuickJumper: true,
            showSizeChanger: true,
            onChange: (page, pageSize) => {
              setPagination({ page, pageSize });
              fetchBusinessOrder({ page, pageSize });
            },
          }}
        />
      </div>
    </>
  );
};

export default BusinessOrderPage;
